<template>
  <div class='login_container'>
    <div class="login_box">
      <!-- 头像区 -->
      <div class="avater_box">
        <img src="../assets/logo.png" alt="">
      </div>
      <!-- 登录表单区 -->
      <!-- rules表单的验证规则对象 -->
      <el-form ref='loginFromRef' :model="logiFrom" :rules="rules" label-width="0px" class='login_form'>
        <!-- 用户名 -->
        <el-form-item prop='username'>
          <el-input v-model='logiFrom.username' prefix-icon="iconfont icon-tianjiayonghu"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop='password'>
        <el-input type='password' v-model='logiFrom.password' prefix-icon="iconfont icon-mima"></el-input>
        </el-form-item>
        <!-- 登录 -->
        <el-form-item class='btn'>
          <el-button type="primary" @click='login'>登录</el-button>
          <!-- 重置 -->
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      logiFrom: {
        username: 'admin',
        password: '123456'
      },
      // 表单验证规则对象
      rules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入正确的用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入正确的密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 重置表单
    resetLoginForm (ruleFrom) {
      // resetFieldds是el提供的方法，对整个表单进行重置
      this.$refs.loginFromRef.resetFields()
      // this.$refs.loginFromRef.username = 'gzdfh' 这种方法不对
    },
    login () {
      // 对整个表单进行一个方法验证
      this.$refs.loginFromRef.validate(async valid => {
        // console.log(valid) 表示是否校验成功和未通过校验的bool布尔值 data: res是别名
        if (!valid) return
        // data是返回的真实数据
        const { data: res } = await this.$http.post('/login', this.logiFrom)
        console.log(res)
        if (res.meta.status !== 200) return this.$message.error('登录失败哦')
        this.$message.success('登录成功哦')
        // console.log(res)
        // 1 将登录成功之后的token,保存到客户端的sessionStore中
        // 项目中除了登录之外的其他API接口，必须在登录之后才能访问。token 只应在当前网站打开期间生效，所以token保存在sessionStorage中
        window.sessionStorage.setItem('token', res.data.token)
        // 2通过编程式导航跳转到后台主页，路由地址是/home
        this.$router.push('/home')
      })
    }
  }

}
</script>

<style lang='less' scoped>
  .login_container{
    background:#2b4b6b;
    height:100%;
    .login_box{
      width:450px;
      height:300px;
      border-radius:3px;
      background:#fff;
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      .avater_box{
        width:130px;
        height:130px;
        border:#fff 1px solid;
        position: absolute;
        top:-50%;
        left:50%;
        transform:translate(-50%,65%);
        border-radius:50%;
        padding:5px;
        background:#fff;
        box-shadow:0 0 10px #ddd;
        img{
          width:100%;
          height:100%;
          border-radius:50%;
          background:#eee;
        }

      }
    }
  }
  .login_form{
    position:absolute;
    bottom:0;
    width:100%;
    padding:0 10px;
    box-sizing:border-box;
    .btn{
      display: flex;
      justify-content:flex-end;
    }
  }
</style>
